import { Box, Button, Container, Grid, Paper, Snackbar, TextField, styled } from "@mui/material";
import { useEffect, useState } from "react";
import fetchData from "../../utils/ApiFetch";
import { useNavigate } from "react-router-dom";
const apiUrl = process.env.REACT_APP_API_URL;




function SignUp(props) {
    const [userName, setUserName] = useState('')
    const [hasError, setHasError] = useState(false)
    const [message, setMessage] = useState('1111')

    const [userPassword, setUserPassword] = useState('')
    const [confirmPassword, setConfirmPassword] = useState('')
    const navigate = useNavigate()
    function handleSubmit(e) {
        const signupReq = async () => {
            if (userPassword === confirmPassword) {
                let resp = await fetchData(apiUrl+'/user/signup', 'POST', {userName: userName, password: userPassword})
                if (resp.code === 200) {
                    setHasError(true)
                    setMessage("注册成功! 稍后跳转登录");
                    setTimeout(()=>{
                        navigate('/signin')
                    }, 2000)
                } else if (resp.code === 400) {
                    setHasError(true)
                    setMessage(resp.message)
                }
            } else {
                setHasError(true)
                setMessage("两次密码不一致")
                setUserPassword('')
                setConfirmPassword('')
            }
        }
        signupReq()
    }




    useEffect(()=> {
        if (hasError) {
            setTimeout(()=>{setHasError(false)}, 3000)
        }
    }, [hasError])

   

    return (
        <Container maxWidth='sm' sx={{height:"100vh"}}>
            <Grid container spacing={2} direction={'column'} sx={{justifyContent:'center', height:'100vh'}}>
                <Paper sx={{marginLeft:'16px', paddingTop: '32px', paddingBottom: '32px'}}>
                    <Grid container spacing={2} sx={{justifyContent:'center'}}>
                        <Grid item xs={10}>
                            <Box  sx={{fontSize:'2rem', fontWeight:'900'}}>注册</Box>
                        </Grid>
                        <Grid item xs={10}>
                            <TextField id="userName" label="用户名" variant="filled" value={userName} onChange={(e)=> setUserName(e.target.value)} fullWidth />
                        </Grid>
                        <Grid item xs={10}>
                            <TextField id="userPassword" label="密码" variant="filled" type='password' value={userPassword} onChange={(e)=> setUserPassword(e.target.value)} fullWidth />
                        </Grid>
                        <Grid item xs={10}>
                        <TextField id="confirmPassword" label="确认密码" variant="filled" type='password' value={confirmPassword} onChange={(e)=> setConfirmPassword(e.target.value)} fullWidth />
                        </Grid>
                        <Grid item xs={10} sx={{display:'flex', justifyContent:'space-between'}}>
                            <Button variant='contained' onClick={handleSubmit}>注册</Button>
                            <Button onClick={(e)=>{navigate('/signin')}} >登录</Button>
                        </Grid>
                        
                    </Grid>
                </Paper>
            </Grid> 
            <Snackbar 
                open={hasError}
                message={message}
                anchorOrigin={{vertical:'top', horizontal: 'center'}}
            >
                
            </Snackbar>
        </Container>
    )
}


export default SignUp;